<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个react程序</title>
</head>
<body>
    <div id="container"></div>
    <!-- 加载 React。-->
    <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <!-- babel.min.js用于解析将jsx语法转为js语法 -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <!-- 加载我们的 React 组件。babel指定使用jsx语法-->
    <script type="text/babel">
        // 1. 创建虚拟DOM
        const VDOM = <h1>hello, react</h1>  /* 此处一定不要写引号，因为不是字符串，而是jsx语法 */
        const domContainer = document.getElementById('container');
        // 2. 渲染虚拟DOM到页面
        ReactDOM.render(VDOM, domContainer);

        const TDOM = document.getElementById('container')
        console.log('虚拟DOM', VDOM)
        console.log('真实DOM', TDOM)
        debugger // 浏览器运行到此处暂停
        /*
            关于虚拟DOM
                1. 本质是Object类型的对象（一般对象）
                2. 虚拟DOM比较“轻/精简”，真实DOM比较“重/属性多”，因为虚拟DOM是React内部在用，无需真实DOM上那么多属性
                3. 虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
        */
    </script>
</body>
</html>